<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin:0px;
				padding:0px;
			}
			.box{
				width: 1000px;
				height: 600px;
				border:1px solid #000000;
			}
			.cell {
				position: absolute;
				width: 100px;
				height: 60px;
				border-radius: 5px;
				border: 2px solid #000;
				line-height: 60px;
				cursor: pointer;
				font-size: 12px;
				text-align: center;
				z-index: 666;
			}
			.cell .cell-info{
				width: 80px;
				height: 180px;
				background: #fff;
				border:1px solid #ccc;
				border-radius: 5px;
				text-align: left;
				z-index: 999;
			}
			.diamond{   
				width: 80px; 
				border:1px solid #000000;
				height: 80px;
				transform:rotate(45deg);  
				-ms-transform:rotate(45deg); /* Internet Explorer */  
				-moz-transform:rotate(45deg); /* Firefox */  
				-webkit-transform:rotate(45deg); /* Safari 和 Chrome */  
				-o-transform:rotate(45deg); /* Opera */   
				margin:50px auto;
				/*让菱形浏览器上居中*/ 
			 }
		</style>
	</head>

	<body>
		<div class="box" id="box">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="panel" width="100%" height="100%" style="border:1px solid red">
				<!-- <line x1="0" y1="0" x2="300" y2="300" id="line" style="stroke:rgb(99,99,99);stroke-width:2" /> -->
			</svg>
		</div>
		<button onclick="createCell()">创建节点</button>
		<button onclick="switchLine()">创建连接线</button>
	</body>

</html>

<script src="js4/DrawBoard.js" type="text/javascript" charset="utf-8"></script>
<script src="js4/step.js" type="text/javascript" charset="utf-8"></script>
<script src="js4/Line.js" type="text/javascript" charset="utf-8"></script>
<script>
	/* 画板 */
	var drawBoard = new DrawBoard("panel");
	var body = document.body;
	/* 已选中元素 */
	var selectedElement = null;
	var selectedLine = {};
	var x, y; //鼠标相对与div左边，上边的偏移
	var isDrop = false; //移动状态的判断鼠标按下才能移动
	const cellPool = new Map();
	const SVG_IN = "http://www.w3.org/2000/svg";
	var type = "";

	function switchLine() {
		type = "line";
	}

	function createCell() {
		type = "";
		var node = new Step();
		drawBoard.addNode(node);
		selectedElement = node.getNode();
	}
	var current_line;
	document.addEventListener("mousedown", function(e) {
		window.svgElement = e.target;
		if (e.target.tagName == "rect") {
			selectedElement = e.target;
		}
		if (type == "line") {
			var line = new Line(e.clientX - e.target.clientLeft, e.clientY - e.target.clientTop);
			drawBoard.addNode(line);
			selectedElement = "";
			selectedLine = line;
		}
	})

	/* document.addEventListener("mouseover", function(e) {
		if (e.target.tagName == "rect") {
			var target = e.target;
			var cellInfoObject = new CellInfo(target);
			var cellInfo = cellInfoObject.element();
			target.appendChild(cellInfo)
		}

	}) */

	document.onmousedown = function(e) {
		var e = e || window.event; //要用event这个对象来获取鼠标的位置
		x = e.clientX - selectedElement.offsetLeft;
		y = e.clientY - selectedElement.offsetTop;
		isDrop = true; //设为true表示可以移动
	}

	document.onmousemove = function(e) {
		//是否为可移动状态                　　　　　　　　　　　 　　　　　　　
		if (isDrop) {

			if (type == "line") {
				/* 在线的移动过程中记录经过的每一个点 */
				selectedLine.finish(e.clientX, e.clientY)
			} else {
				var e = e || window.event;
				var moveX = e.clientX - x; //得到距离左边移动距离                    　　
				var moveY = e.clientY - y; //得到距离上边移动距离
				//可移动最大距离
				var maxX = document.documentElement.clientWidth - selectedElement.offsetWidth;
				var maxY = document.documentElement.clientHeight - selectedElement.offsetHeight;
				//范围限定方法二　
				moveX = Math.min(maxX, Math.max(0, moveX));
				moveY = Math.min(maxY, Math.max(0, moveY));
				if (selectedElement != null) {
					selectedElement.setAttribute("x", e.clientX - e.target.clientLeft);
					selectedElement.setAttribute("y", e.clientY - e.target.clientTop);
				}
			}
		} else {
			return;
		}

	}

	document.onmouseup = function() {
		isDrop = false; //设置为false不可移动
		if(type=="line"){
			selectedLine.format();
		}
	}
</script>
